<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="时间">
                <el-date-picker
                v-model="dateRange"
                size="small"
                style="width: 350px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!--为echarts准备一个具备大小的容器dom-->
        <h2>vue 时间段流量统计图</h2>
        <div id="chartLineBox" > </div>
    </div>
    
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: '',
        data() {
            return {
                 // 显示搜索条件
                showSearch: true,
                // 日期范围
                dateRange: [],
                queryParams:{}        
            }
        },
        methods: {
            /** 查询跟踪日志列表 */
            getList() {
                this.loading = true;
                    listBcrRead(this.addDateRange(this.queryParams, this.dateRange)).then(
                response => {       
                this.BcrReadList = response.rows;
                this.total = response.total;
                this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                // this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
        },
        
        mounted() {
            this.chartLine = echarts.init(document.getElementById('chartLineBox'));
            // 指定图表的配置项和数据
            var option = {
                tooltip: {              //设置tip提示
                    trigger: 'axis'
                },
                legend: {               //设置区分（哪条线属于什么）
                    data:['成功数量','失败数量']
                },
                color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                xAxis: {                //设置x轴
                    name: '时间段',           //X轴 name
                    type: 'category',
                    boundaryGap: false,     //坐标轴两边不留白
                    axisTick: {
                        alignWithLabel: true
                    },
                    // data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1',],
                    data: ["0~1","1~2","2~3","3~4","4~5",'5~6',"6~7","7~8","8~9","9~10","10~11",'11~12',"12~13","13~14","14~15","15~16","16~17",'17~18',"18~19","19~20","20~21","21~22","22~23",'23~24'],
                    
                },
                yAxis: {
                    name: '流量值',
                    type: 'value'
                },
                series: [
                {
                    name: '成功数量',
                    data:  [220, 232, 201, 234, 290, 230, 220, 220, 232, 201, 234, 290, 230, 220, 220, 232, 201, 234, 290, 230, 220, 270, 210, 320],
                    type: 'line',   // 类型为折线图
                },
                {
                    name: '失败数量',
                    data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 150, 180, 80],
                    type: 'line',
                }
            ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            this.chartLine.setOption(option);
            
            }
        }
</script>
<style scoped>
    h2{
    text-align: center;
    padding: 0px;
    font-size: 18px;
    }
    #chartLineBox {
        width: 100%;
        height: 60vh;
        /* border: 1px solid	#C0C0C0; */
        margin: 0 auto;
    }
</style>
